<template>
  <a-modal :title="showTitle" :visible="props.showDialog" @cancel="btnCancel" @ok="onFinish">
    <a-form
      ref="formRef"
      :label-col="{ span: 10 }"
      layout="vertical"
      :wrapper-col="{ span: 18 }"
      :model="formData"
    >
      <a-form-item
        label="计费规则编号"
        name="ruleNumber"
        :rules="[{ required: true, message: '计费规则编号不能为空', trigger: 'change' }]"
      >
        <a-input placeholder="请输入计费规则编号" v-model:value="formData.ruleNumber"></a-input>
      </a-form-item>
      <a-form-item
        label="计费规则名称"
        name="ruleName"
        :rules="[{ required: true, message: '计费规则名称不能为空', trigger: 'change' }]"
      >
        <a-input placeholder="请输入计费规则名称" v-model:value="formData.ruleName"></a-input>
      </a-form-item>

      <a-form-item
        label="计费方式（全天收费）"
        name="chargeType"
        :rules="[{ required: true, message: '用户名不能为空', trigger: 'change' }]"
      >
        <a-radio-group v-model:value="formData.chargeType">
          <a-radio value="duration">时长收费</a-radio>
          <a-radio value="turn">按次收费</a-radio>
          <a-radio value="partition">分段收费</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item>
        <span style="margin-right: 128px">免费时长</span>
        收费上限
        <a-space>
          <a-input placeholder="请输入免费时长" v-model:value="formData.freeDuration"></a-input>
          <div style="width: 28px">分钟</div>
          <a-input placeholder="请输入收费上限" v-model:value="formData.chargeCeiling"></a-input>
          元
        </a-space>
      </a-form-item>
      <a-form-item
        label="计费规则"
        :rules="[{ required: true, message: '计费规则不能为空', trigger: 'blur' }]"
      >
        <a-space v-show="formData.chargeType === 'duration'">
          每
          <a-input-number
            placeholder="请输入"
            v-model:value="formData.durationTime"
          ></a-input-number>
          <a-select v-model:value="formData.durationType" style="width: 118px" placeholder="请选择">
            <a-select-option value="minute">小时</a-select-option>
            <a-select-option value="hour">分钟</a-select-option>
          </a-select>
          <a-input
            placeholder="请输入"
            style="width: 87px"
            v-model:value="formData.durationPrice"
          ></a-input
          >元<z></z>
        </a-space>

        <a-space v-show="formData.chargeType === 'turn'">
          每次<a-input placeholder="请输入金额" v-model:value="formData.turnPrice"></a-input>元
        </a-space>

        <a-space v-show="formData.chargeType === 'partition'">
          <a-input-number
            placeholder="请输入"
            style="width: 99px"
            v-model:value="formData.partitionFrameTime"
          ></a-input-number>
          <div style="width: 120px">小时内, 每小时收费</div>
          <a-input
            placeholder="请输入"
            style="width: 98px"
            v-model:value="formData.partitionFramePrice"
          ></a-input
          >元
        </a-space>
      </a-form-item>
      <a-form-item v-show="formData.chargeType === 'partition'">
        <a-space>
          <div style="width: 47px">每增加</div>
          <a-input-number
            placeholder="请输入"
            style="width: 98px"
            v-model:value="formData.partitionIncreaseTime"
          ></a-input-number>
          <div style="width: 65px">小时, 增加</div>
          <a-input
            placeholder="请输入"
            style="width: 98px"
            v-model:value="formData.partitionIncreasePrice"
          ></a-input
          >元
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
=
<script setup>
import { reactive, watch, computed, ref } from 'vue'
import { message } from 'ant-design-vue'
import { addRules, editRules, getRuleDetailById } from '@/api/billingrule.js'
// 宏命令
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  currentId: {
    type: Number
  }
})
watch(
  () => props.currentId,
  () => {
    if (props.currentId) {
      getRuleDetail(props.currentId)
    }
  }
)
const showTitle = computed(() => (props.currentId ? '编辑计费规则' : '添加计费规则'))
const formRef = ref(null) // 声名的变量
const formData = reactive({
  id: null, //计费规则id
  ruleNumber: '', //计费规则编号
  ruleName: '', //计费规则名称
  freeDuration: null, //免费时长
  chargeCeiling: null, //收费上限
  chargeType: 'duration', //收费类型，时长收费:duration,按次收费:turn,分段收费:partition
  durationTime: null, //时长计费:单位时间
  durationPrice: null, //时长计费:单位价格
  durationType: null, //时长计费,计费方式 ,minute分钟,hour:小时
  turnPrice: null, //按次收费：每次价格
  partitionFrameTime: null, //分段收费:段内时间
  partitionFramePrice: null, //分段收费:段内费用
  partitionIncreaseTime: null, //分段收费:超出时间
  partitionIncreasePrice: null //分段收费:超出范围收费价钱
})
const emit = defineEmits(['update:showDialog', 'addSuccess', 'clearId'])
const btnCancel = () => {
  // 清空表单
  formRef.value?.resetFields()
  emit('clearId') // 清空id
  formData.id = null //计费规则id
  formData.ruleNumber = '' //计费规则编号
  formData.ruleName = '' //计费规则名称
  formData.freeDuration = null //免费时长
  formData.chargeCeiling = null //收费上限
  formData.chargeType = 'duration' //收费类型，时长收费=duration按次收费=turn分段收费=partition
  formData.durationTime = null //时长计费=单位时间
  formData.durationPrice = null //时长计费=单位价格
  formData.durationType = null //时长计费计费方式 minute分钟hour=小时
  formData.turnPrice = null //按次收费：每次价格
  formData.partitionFrameTime = null //分段收费=段内时间
  formData.partitionFramePrice = null //分段收费=段内费用
  formData.partitionIncreaseTime = null //分段收费=超出时间
  formData.partitionIncreasePrice = null //分段收费=超出范围收费价钱
  emit('update:showDialog', false) // 通知父组件 将showDialog改成false
}
// 获取用户详情
const getRuleDetail = async (id) => {
  const res = await getRuleDetailById(id)
  Object.assign(formData, res.data)
  emit('update:showDialog', true) // 通知父组件 将showDialog改成true
}
const onFinish = async () => {
  formRef.value?.validate()
  const obj = { ...formData }
  if (formData.chargeType === 'duration') {
    delete obj.turnPrice
    delete obj.partitionFrameTime
    delete obj.partitionFramePrice
    delete obj.partitionIncreaseTime
    delete obj.partitionIncreasePrice
  } else if (formData.chargeType === 'turn') {
    delete obj.durationTime
    delete obj.durationPrice
    delete obj.durationType
    delete obj.partitionFrameTime
    delete obj.partitionFramePrice
    delete obj.partitionIncreaseTime
    delete obj.partitionIncreasePrice
  } else {
    delete obj.turnPrice
    delete obj.durationTime
    delete obj.durationPrice
    delete obj.durationType
  }
  // 判断有没有id
  if (props.currentId) {
    // 编辑用户
    await editRules(obj)
    message.success('编辑用户成功')
  } else {
    delete obj.id
    await addRules(obj)
    message.success('新增用户成功')
  }
  emit('addSuccess') // 通知父组件更新
  btnCancel() // 关闭弹层
}
</script>

<style lang="less">
.ant-radio-wrapper {
  border: 1px solid #4770ff;
  border-radius: 4px;
  position: relative;
  padding: 5px;
  margin-right: 22px;
  &:last-child {
    margin: 0;
  }
}
</style>
